<style>
#gkzpZpgg .table tr td,
#gkzpZpgg .table tr th {
    text-align: center;
    height: 42px;
    line-height: 42px;
    padding: 0;
}

#gkzpZpgg .top-container {
    padding: 10px;
    background-color: #f5f5f5;
}

#gkzpZpgg .sn-col {
    display: inline-block;
}

#gkzpZpgg .search-text {
    width: 520px !important;
    margin-left: 10px;
}

#gkzpZpgg .list {
    border: 1px solid #ebebeb;
    padding: 10px;
    margin-top: 20px;
}
#gkzpZpggFb{
	padding: 0 15px;
}
#gkzpZpggFb:hover{
	background-color: #fe0103;
}
#gkzpZpggFb img{
	vertical-align: text-bottom;
	margin-right: 7px;
}
</style>
<div id="gkzpZpgg" ms-controller="gkzpZpgg">
    <div class="gkzpZpgg" id="gkzpZpgg1">
        <div class="top-container">
            <div class="">
                <div class="sn-col">
                    <div class="input-group">
                        <button class="btn btn-danger" type="button" id="gkzpZpggFb">
                        <img src="../images/icon_add.png" alt="">
                        发布招聘公告
                        </button>
                    </div>
                </div>
                <div class="sn-col">
                    <div class="input-group search">
                        <input type="text" class="form-control search-text" placeholder="">
                        <span class="input-group-btn">
       						<button class="btn btn-info" type="button">搜索</button>
      					</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="list" id="gkzpZpggList">
            <div class="sn-tab">
                <div class="sn-tab-nav">
                    <div class="sn-tab-nav-item active">发布中(5)</div>
                    <div class="sn-tab-nav-item">办理中(5)</div>
                    <div class="sn-tab-nav-item">已下线(5)</div>
                    <div class="sn-tab-nav-item">草稿(5)</div>
                </div>
                <div class="sn-tab-body">
                    <div class="sn-tab-body-item" style="display: block;">
                        <table class="table table-bordered">
                            <tr>
                                <th>招聘公告</th>
                                <th>职位数</th>
                                <th>人数</th>
                                <th>发布日期</th>
                                <th>截至日期</th>
                            </tr>
                            <tr ms-repeat="data.fabu">
                                <td>{{el.zpgg}}</td>
                                <td>{{el.zws}}</td>
                                <td>{{el.rs}}</td>
                                <td>{{el.fbrq}}</td>
                                <td>{{el.jzrq}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="sn-tab-body-item">
                        <table class="table table-bordered">
                            <tr>
                                <th>招聘公告</th>
                                <th>职位数</th>
                                <th>人数</th>
                                <th>发布日期</th>
                                <th>截至日期</th>
                            </tr>
                            <tr ms-repeat="data.banli">
                                <td>{{el.zpgg}}</td>
                                <td>{{el.zws}}</td>
                                <td>{{el.rs}}</td>
                                <td>{{el.fbrq}}</td>
                                <td>{{el.jzrq}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="sn-tab-body-item">
                        <table class="table table-bordered">
                            <tr>
                                <th>招聘公告</th>
                                <th>职位数</th>
                                <th>人数</th>
                                <th>发布日期</th>
                                <th>截至日期</th>
                            </tr>
                            <tr ms-repeat="data.xiaxian">
                                <td>{{el.zpgg}}</td>
                                <td>{{el.zws}}</td>
                                <td>{{el.rs}}</td>
                                <td>{{el.fbrq}}</td>
                                <td>{{el.jzrq}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="sn-tab-body-item">
                        <table class="table table-bordered">
                            <tr>
                                <th>招聘公告</th>
                                <th>职位数</th>
                                <th>人数</th>
                                <th>发布日期</th>
                                <th>截至日期</th>
                                <th>操作</th>
                            </tr>
                            <tr ms-repeat="data.caogao">
                                <td>{{el.zpgg}}</td>
                                <td>{{el.zws}}</td>
                                <td>{{el.rs}}</td>
                                <td>{{el.fbrq}}</td>
                                <td>{{el.jzrq}}</td>
                                <td>
                                	<a href="#">编辑</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var gkzpZpgg = avalon.define({
    $id: "gkzpZpgg",
    data: {
        fabu: [{
            zpgg: '招聘公告1',
            zws: '5',
            rs: '10',
            fbrq: '2017年3月1号',
            jzrq: '2017年8月1号'
        }],
        banli: [{
            zpgg: '招聘公告2',
            zws: '5',
            rs: '10',
            fbrq: '2017年3月1号',
            jzrq: '2017年8月1号'
        }],
        xiaxian: [{
            zpgg: '招聘公告3',
            zws: '5',
            rs: '10',
            fbrq: '2017年3月1号',
            jzrq: '2017年8月1号'
        }],
        caogao: [{
            zpgg: '招聘公告4',
            zws: '5',
            rs: '10',
            fbrq: '2017年3月1号',
            jzrq: '2017年8月1号'
        }]
    }
});
setTimeout(init, 0);

function init() {
	snTab($("#gkzpZpggList"));
}

function snTab(outter) {
    outter.find(".sn-tab-nav-item").click(function(event) {
        var index = $(this).index();
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        $(this).parent().next().find(".sn-tab-body-item").hide().eq(index).show();
    });
}
</script>
